<template>
  <div class="flow-attr">
    <el-form
      v-if="validateNodeJob()"
      label-position="left"
      class="flow-config-attr"
      label-width="90px"
    >
      <el-form-item label="任务名称">
        <el-input
          v-model="data.task.name"
          class="input-attr"
          placeholder="请输入任务名称"
        />
      </el-form-item>
      <el-form-item label="办理人类型">
        <el-radio-group
          v-model="data.task.jobType"
          @change="handleJobTypeChange"
        >
          <el-radio
            v-for="(item, index) in DIC_PROP.JOB_TYPE"
            :key="index"
            :value="item.value"
            :label="item.label"
          />
        </el-radio-group>
      </el-form-item>
      <template
        v-if="
          _value.type === 'Start' ||
          _value.type === 'End' ||
          _value.type === 'Job'
        "
      >
        <el-form-item v-if="data.task.jobType === '0'" label="办理人员">
          <el-button
            style="margin-right: 10px"
            round
            size="small"
            type="primary"
            @click="handleUserPickerShow('0')"
          >
            选择人员
          </el-button>
          <div class="w-org-items">
            <el-tag
              v-for="(tag, index) in data.task.userList"
              :key="tag.id"
              closable
              type="primary"
              @close="data.task.userList.splice(index, 1)"
              style="margin-right: 10px"
            >
              {{ tag.text }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item v-if="data.task.jobType === '1'" label="办理角色">
          <el-button
            style="margin-right: 10px"
            round
            size="small"
            type="primary"
            @click="handleRolePickerShow"
          >
            选择角色
          </el-button>
          <div class="w-org-items">
            <el-tag
              v-for="(tag, index) in data.task.roleList"
              :key="tag.id"
              closable
              type="primary"
              @close="data.task.roleList.splice(index, 1)"
              style="margin-right: 10px"
            >
              {{ tag.text }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item
          v-if="
            data.task.jobType === '4' ||
            data.task.jobType === '5' ||
            data.task.jobType === '6' ||
            data.task.jobType === '9'
          "
          label="哪个部门"
        >
          <div v-if="data.task.jobType === '4' || data.task.jobType === '5'">
            <el-radio-group
              v-model="data.task.dynamicUserType"
              @change="handleDynamicUserTypeChange"
            >
              <el-radio
                v-for="(item, index) in DIC_PROP.WHOSE_TYPE"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-radio-group>
            <div style="display: flex; justify-content: start">
              <div v-if="data.task.dynamicUserType === '1'">
                <el-button
                  style="margin-right: 10px"
                  round
                  size="small"
                  type="primary"
                  @click="handleUserPickerShow('1')"
                >
                  选择人员
                </el-button>
              </div>
              <div>
                <el-tag
                  v-if="
                    data.task.dynamicUserType === '1' && data.task.dynamicUserId
                  "
                  closable
                  type="primary"
                  @close="data.task.dynamicUserId = null"
                  style="margin-right: 10px"
                >
                  {{ data.task.dynamicUserName }}
                </el-tag>
                <span style="margin-right: 10px">{{
                  data.task.jobType === "4" ? "第" : "连续"
                }}</span>
                <el-input-number
                  v-model="data.task.dynamicUserLeaderLevel"
                  :min="-1"
                  :max="10"
                  :step="1"
                  style="width: 100px"
                />
                <span>&nbsp;级主管</span>
                <el-tooltip
                  placement="top"
                  content="-1表示直达最上层主管，0表示指定人员部门主管"
                >
                  <el-icon style="margin-left: 10px"
                    ><QuestionFilled />
                  </el-icon>
                </el-tooltip>
              </div>
            </div>
          </div>
          <div v-if="data.task.jobType === '6' || data.task.jobType === '9'">
            <el-radio-group
              v-model="data.task.dynamicDeptType"
              v-if="data.task.jobType === '9'"
            >
              <el-radio
                v-for="(item, index) in DIC_PROP.DYNAMIC_DEPT_TYPE"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-radio-group>
            <div
              v-if="
                data.task.dynamicDeptType === '1' || data.task.jobType === '6'
              "
            >
              <el-button
                style="margin-right: 10px"
                round
                size="small"
                type="primary"
                @click="handleUserPickerShow('2')"
              >
                选择部门
              </el-button>
              <el-tag
                v-if="data.task.dynamicDeptId"
                closable
                type="primary"
                @close="
                  () => {
                    data.task.dynamicDeptId = null;
                    data.task.dynamicDeptName = null;
                  }
                "
                style="margin-right: 10px"
              >
                {{ data.task.dynamicDeptName }}
              </el-tag>
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="data.task.jobType === '7'" label="表单字段">
          <el-select v-model="data.task.dynamicUserKey" clearable filterable>
            <el-option
              v-for="(item, index) in data.formItemList"
              :key="index"
              :label="getFormItemLabel(item)"
              :value="getFormItemKey(item)"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="data.task.jobType === '8' || data.task.jobType === '9'"
          label="办理岗位"
        >
          <el-button
            style="margin-right: 10px"
            round
            size="small"
            type="primary"
            @click="handleJobPickerShow"
          >
            选择岗位
          </el-button>
          <div class="w-org-items">
            <el-tag
              v-if="data.task.dutyId && data.task.dutyName"
              closable
              type="primary"
              @close="data.task.dutyId === ''"
              style="margin-right: 10px"
            >
              {{ data.task.dutyName }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item v-if="data.task.jobType === '10'" label="动态函数">
          <div>
            <CommonSelect
              v-model:defaultValue="data.task.dynamicFunctionId"
              placeholder="请选择事件处理器"
              autoQuery
              label="functionName"
              value="id"
              url="/esflow/auditor/function/getlist"
              @change="handleFunctionChange"
              :width="300"
            />
          </div>
        </el-form-item>
        <el-form-item v-if="data.task.jobType === '10'">
          <template #label>
            <div class="flex flex-row items-center">
              <span>函数参数</span>
              <el-tooltip placement="top">
                <template #content>
                  参数支持固定值和SpEL格式,#columnKey表示表单的字段 (
                  默认#flowform.前缀,例如#applyDays ),
                  加前缀#flowvar.anyKey表示从流程条件中取值
                </template>
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
          </template>
          <div
            v-for="(item, index) in data.task.dynamicFunctionParams"
            :key="index"
            class="flex flex-row items-center"
          >
            <el-text style="width: 100px">{{ item.paramLabel }}</el-text>
            <el-input
              v-model="item.paramValue"
              class="input-attr"
              type="text"
            />
          </div>
        </el-form-item>
        <el-form-item
          label="提取规则"
          v-if="
            data.task.jobType === '4' ||
            data.task.jobType === '5' ||
            data.task.jobType === '6' ||
            data.task.jobType === '7'
          "
        >
          <el-radio-group
            v-model="data.task.dynamicEmptyMethod"
            style="width: 283px"
          >
            <el-radio
              v-for="(item, index) in EXTRACTS"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </el-radio-group>
        </el-form-item>
      </template>
      <el-divider />
      <el-form-item label="任务时限">
        <el-input-number
          v-model="data.task.timeout"
          class="input-attr"
          placeholder="小于0则不限制"
        />
      </el-form-item>
      <el-form-item label="任务排序">
        <el-input-number v-model="data.task.sort" class="input-attr" :min="1" />
      </el-form-item>
    </el-form>
    <OrgUserPicker
      ref="userPickerRef"
      :multiple="data.userPickerType === '0'"
      :type="
        data.userPickerType === '0' || data.userPickerType === '1'
          ? 'user'
          : 'dept'
      "
      @ok="handleUserPickerConfirm"
    />
    <RolePicker ref="rolePickerRef" @change="handleRolePickerConfirm" />
    <JobPicker
      ref="jobPickerRef"
      @change="handleJobPickerConfirm"
      :multiple="false"
    />
  </div>
</template>
<script setup name="NodeTaskBaseAttr">
import { validateNull } from "@/utils/validate";
import { DIC_PROP } from "@/views/design/process/Dict";
import { queryFormItemList } from "@/api/flow/form/";
import OrgUserPicker from "../../../OrgUserPicker.vue";
import RolePicker from "@/components/rolePicker.vue";
import JobPicker from "@/components/jobPicker.vue";
import { getFormItemLabel, getFormItemKey } from "@/views/design/form/FormItem";

const props = defineProps({
  taskIndex: Number,
  defFlow: Object
});

const _value = defineModel();

const userPickerRef = ref(null);
const rolePickerRef = ref(null);
const jobPickerRef = ref(null);

const data = reactive({
  //选择人员用途 0：办理人 1：人员部门主管 2:指定部门主管
  userPickerType: "0",
  formItemList: [],
  task: {}
});

const EXTRACTS = [
  {
    label: "无法找到时由系统管理员代审批",
    value: "0"
  },
  {
    label: "无法找到时[按空]处理",
    value: "1"
  }
];

const queryFormFieldData = () => {
  queryFormItemList(props.defFlow.formId).then(res => {
    if (res.code === 200) {
      data.formItemList = res.data;
    } else {
      data.formItemList = [];
    }
  });
};

const init = () => {
  data.task = _value.value.props.tasks[props.taskIndex];
  if (props.taskIndex > 0) {
    data.task.sort = props.taskIndex + 1;
  }
  queryFormFieldData();
};

onMounted(() => {
  init();
});

watchEffect(() => {
  init();
});

const handleUserPickerShow = type => {
  data.userPickerType = type;
  userPickerRef.value.show();
};

function handleUserPickerConfirm(users) {
  if (data.userPickerType === "0") {
    data.task.userList = users;
    data.task.userId = "";
  } else if (data.userPickerType === "1") {
    data.task.dynamicUserId = users[0].id;
    data.task.dynamicUserName = users[0].text;
  } else if (data.userPickerType === "2") {
    data.task.dynamicDeptId = users[0].id;
    data.task.dynamicDeptName = users[0].text;
  }
}

const handleRolePickerShow = () => {
  rolePickerRef.value.show();
};

const handleRolePickerConfirm = roles => {
  data.task.roleList = roles;
  data.task.roleId = "";
};

const handleJobPickerShow = () => {
  jobPickerRef.value.show();
};

const handleFunctionChange = (id, option) => {
  data.task.dynamicFunctionName = option.functionName;
  data.task.dynamicFunctionParams = option.params;
};

const handleJobPickerConfirm = rows => {
  if (rows && rows.length > 0) {
    data.task.dutyId = rows[0].id;
    data.task.dutyName = rows[0].text;
  }
};

const handleDynamicUserTypeChange = val => {
  if (val === "0") {
    data.task.dynamicUserId = null;
    data.task.dynamicUserName = null;
  }
};

const validateTask = () => {
  if (!data.task) data.task = _value.value.props.tasks[props.taskIndex];
  if (validateNull(data.task)) return false;
  return true;
};

const clearUserIdOrRoleId = (clearUserId, clearRoleId) => {
  if (clearUserId) {
    data.task.userList = [];
  }
  if (clearRoleId) {
    data.task.roleList = [];
  }
};

const handleJobTypeChange = type => {
  if (!validateTask()) {
    return;
  }
  data.task.jobType = type;
  if (type === DIC_PROP.JOB_TYPE[0].value) {
    clearUserIdOrRoleId(false, true);
    data.task.dynamicUserId = "";
    data.task.dynamicUserName = "";
    data.task.dynamicDeptId = "";
    data.task.dynamicDeptName = "";
    data.task.dynamicUserKey = "";
  } else if (type === DIC_PROP.JOB_TYPE[1].value) {
    clearUserIdOrRoleId(true, false);
    data.task.dynamicUserId = "";
    data.task.dynamicUserName = "";
    data.task.dynamicDeptId = "";
    data.task.dynamicDeptName = "";
    data.task.dynamicUserKey = "";
  } else {
    clearUserIdOrRoleId(true, true);
    if (type === "3") {
      data.task.dynamicUserId = "";
      data.task.dynamicUserName = "";
      data.task.dynamicDeptId = "";
      data.task.dynamicDeptName = "";
      data.task.dynamicUserKey = "";
    } else if (type === "4" || type === "5") {
      data.task.dynamicDeptId = "";
      data.task.dynamicDeptName = "";
      if (data.task.dynamicUserType === "0") {
        data.task.dynamicUserId = "";
        data.task.dynamicUserName = "";
      }
    } else if (type === "6") {
      data.task.dynamicUserId = "";
      data.task.dynamicUserName = "";
      data.task.dynamicDeptId = "";
      data.task.dynamicDeptName = "";
    } else if (type === "7") {
      data.task.dynamicUserId = "";
      data.task.dynamicUserName = "";
      data.task.dynamicDeptId = "";
      data.task.dynamicDeptName = "";
    }
  }
};

const validateNodeJob = () => {
  if (!validateTask()) {
    return false;
  }
  if (data.task.jobType === "0") {
  }
  return (validateNode() && data.task) || _value.value.type === "Job";
};

const validateNode = () => {
  if (!validateTask()) {
    return false;
  }
  const type = _value.value.type;
  return type === "Start" || type === "End" || type === "Job";
};
</script>
<style lang="scss" scoped>
@use "@/assets/style/design/flow-attr.scss";
@use "@/assets/style/design/flow-drawer.scss";
</style>
